<template>
  <div class="login">
    <div class="card">
      <div class="title">
        AgileTest<span>测试管理平台</span>
      </div>
      <br />
      <span
        :class="btnClass('1')"
        @click="typeChange('1')"
      > 使用 AQUMON AD账号登录</span>
<!--      <span-->
<!--        :class="btnClass('2')"-->
<!--        @click="typeChange('2')"-->
<!--      > 注册 </span>-->
      <div class="input">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demoForm">
          <el-form-item prop="username">
            <el-input
              v-model="ruleForm.username"
              placeholder="用户名"
              auto-complete="on"
              prefix-icon="el-icon-user"
              tabindex="1"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="ruleForm.password"
              type="password"
              placeholder="密码"
              :show-password="true"
              auto-complete="on"
              tabindex="2"
              prefix-icon="el-icon-lock"
              @keyup.enter.native="submitForm"
            />
          </el-form-item>

          <el-form-item>
            <el-button :loading="false" type="primary" class="onBtn" @click="submitForm('ruleForm')">{{ btnNameChange() }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import './less/login.less'
import request from '@/utils/axios'
import utils from '@/utils'
import { Message } from 'element-ui'

export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      redirect: undefined,
      type: '1',
      btnName: '',
      ruleForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    typeChange(type) {
      this.type = type
      return this.type
    },
    btnClass(type) {
      return this.type === type ? 'btn btn_active' : 'btn'
    },
    btnNameChange() {
      return this.type === '1' ? '登录' : '注册并登录'
    },
    submitForm(formName) {
      console.log(this.ruleForm)
      let _this = this
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          _this.loading = true
          if (_this.type === '1') {
            _this.$store.dispatch('user/login', this.ruleForm).then(res => {
              _this.loading = false
              Message.success('登录成功')
              _this.$router.push({ path: this.redirect || '/' })
            }).catch(() => {
              _this.loading = false
            })
          } else {
            // 注册
            request(`/user/register`, {
              method: 'POST',
              body: this.ruleForm
            }).then(res => {
              if (res && res.code === 200) {
                Message.success('注册成功并自动登录跳转')
                _this.$router.push({ path: this.redirect || '/case' })
                _this.loading = false
              } else {
                _this.loading = false
                Message.error(res.msg)
              }
            })
          }
        } else {
          console.log('error submit!!')
          _this.loading = false
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.mlogo {
  height: 60%;
  margin-top: 10px;
}

.demoForm {
  max-width: 400px;
  margin: 0 auto;
}

</style>
